import React, { FC } from 'react';

if (process.env.BROWSER) {
    require('./common-list-exp.scss');
}

const COM_PREKEY = 'CommonListExperience';

interface CommonListExperienceProps {
    experiences: string[];

    /**
     * @default is 'is-list-inside'
     */
    specialClassName?: string;

    /**
     * @default is 'experience'
     */
    specialKeyTitle?: string;
}

const CommonListExperience: FC<CommonListExperienceProps> = (props) => {
    const filteredExperiences = props.experiences
        ?.filter(Boolean)
        ?.filter((experience) => experience?.length > 0);

    return (
        filteredExperiences?.length > 0 && (
            <ul
                className={`common-ul${
                    props.specialClassName ? ` ${props.specialClassName}` : ' is-list-inside'
                }`}
            >
                {filteredExperiences.map((experience, i) => {
                    return (
                        <li key={`${COM_PREKEY}_${props.specialKeyTitle ?? 'experience'}_${i}`}>
                            {experience}
                        </li>
                    );
                })}
            </ul>
        )
    );
};

CommonListExperience.displayName = 'CommonListExperience';

export { CommonListExperience, CommonListExperienceProps };
